import React from 'react';
import {connect} from 'dva';
import {Link, browserHistory} from 'dva/router';
import {Table, Row, Col, Form, Input, Icon, InputNumber, Radio, DatePicker, Select, Upload, Button, Switch, Modal, Popconfirm, Tabs, message} from 'antd';
import moment from 'moment'
import OperatorConstant from "../../../utils/OperatorConstant";
import Constants from '../../../utils/Constants';
import RIGHT from "../../../utils/RightConstants";
import RightBox from '../../../components/commons/RightBox';
const R = require('ramda');
const dateFormat = 'YYYY-MM-DD';
const { RangePicker } = DatePicker;
const FormItem = Form.Item;
const Option = Select.Option;
const RadioGroup = Radio.Group;

export default connect(({blacklist}) => ({blacklist}))(
    Form.create()(class blacklist extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
            }
        }

        componentDidMount() {
            this.props.dispatch({ type: 'blacklist/getListForPage', payload: { page: Constants.DEFAULT_PAGE } });
        }


        handleSearch = () => {
            let values = this.props.form.getFieldsValue();
            let newPage = this.props.blacklist.page;
            newPage.page = 1;

            let beginTime = "";
            let endTime = "";

            if (values.createtime != null && values.createtime != undefined) {
                if(values.createtime.length >=2 ){
                    if(values.createtime[0] != ''){
                        beginTime = values.createtime[0].format(dateFormat);
                    }
                    if(values.createtime[1] != ''){
                        endTime = values.createtime[1].format(dateFormat);
                    }

                }
            }


            this.props.dispatch({
                type: 'blacklist/getListForPage',
                payload: {
                    customerno: values.customerno,
                    cstName: values.cstName,
                    beginTime: beginTime,
                    endTime: endTime,
                    page: newPage
                }
            });
        };

        handleDelete = (id) => {
            this.props.dispatch({
                    type: 'blacklist/deleteBlacklist',
                    payload: {
                        id: id,
                        onSuccess: () => this.handleSearch()
                    }
                }
            );
        }

        columns = [
            {title: '客户编码', dataIndex: 'customerno', key: 'customerno'},

            {title: '客户名称', dataIndex: 'companyname', key: 'companyname'},

            {title: '创建人', dataIndex: 'creatorName', key: 'creatorName'},

            {title: '创建时间', dataIndex: 'createtime', key: 'createtime',},

            {title: '备注', dataIndex: 'memo', key: 'memo'},

            {title: '操作', width: '170px', fixed: 'right', key: 'key_oprator',

                render: (text, record, index) => {
                    return (
                        <span>
                           <RightBox resource={RIGHT.CUSTOMER.CUSTOMER_BLACKLIST_DELETE}>
                             <Popconfirm placement="leftTop" title={'数据删除后将不可以恢复，是否继续删除？'} onConfirm={ this.handleDelete.bind(this,record.id)} okText="是" cancelText="否">
                                    <a href="#">移除黑名单</a>
                                </Popconfirm>
                           </RightBox>
                       </span>
                    );

                }
            }
        ];


        render () {
            let dataSouce = R.isNil(this.props.blacklist.dataSource) ? {} : this.props.blacklist.dataSource;
            let formItemLayout = {labelCol: {span: 6}, wrapperCol: {span: 18}};
            const { getFieldDecorator } = this.props.form;
            let values = this.props.form.getFieldsValue();

            let beginTime = "";
            let endTime = "";


            if (values.createtime != null && values.createtime != undefined) {
                if(values.createtime.length >=2 ){
                    if(values.createtime[0] != ''){
                        beginTime = values.createtime[0].format(dateFormat);
                    }
                    if(values.createtime[1] != ''){
                        endTime = values.createtime[1].format(dateFormat);
                    }

                }
            }

            let pagination = {
                showTotal: total => `共 ${total} 条数据`,
                pageSize: this.props.blacklist.page.size,
                total: this.props.blacklist.page.totalRow,
                showSizeChanger: true,
                current:this.props.blacklist.page.page,
                onShowSizeChange: (current, size) => {
                    let newPage = this.props.blacklist.page;
                    newPage.size = size;
                    newPage.page = 1;
                    this.props.dispatch({
                        type: 'blacklist/getListForPage',
                        payload: {
                            customerno: values.customerno,
                            cstName: values.companyname,
                            beginTime: beginTime,
                            endTime: endTime,
                            page: newPage
                        }
                    });
                },
                onChange: (pageNumber, pageSize) => {

                    let newPage = this.props.blacklist.page;
                    newPage.page = pageNumber;
                    this.props.dispatch({
                        type: 'blacklist/getListForPage',
                        payload: {
                            customerno: values.customerno,
                            cstName: values.companyname,
                            beginTime: beginTime,
                            endTime: endTime,
                            page: newPage
                        }
                    });
                }
            }
            return (
                <div>

                    <Form >
                        <div style={{width: 1250}}>
                            <Row >
                                <Col span={6}>
                                    <FormItem {...formItemLayout} label={'客户编码'}>
                                        {getFieldDecorator('customerno', {})(
                                            <Input style={{width: 200}}/>
                                        )}
                                    </FormItem>
                                </Col>
                                <Col span={6}>
                                    <FormItem  {...formItemLayout} label={'创建时间'}>
                                        {getFieldDecorator('createtime', {})(
                                            <RangePicker
                                                showTime={{ format: 'YYYY-MM-DD' }}
                                                format="YYYY-MM-DD"
                                                placeholder={['开始时间', '结束时间']}
                                            />
                                        )}
                                    </FormItem>
                                </Col>

                            </Row>
                            <Row >
                                <Col span={6}>
                                    <FormItem {...formItemLayout} label={'客户名称'}>
                                        {getFieldDecorator('cstName', {})(
                                            <Input style={{width: 200}}/>
                                        )}
                                    </FormItem>
                                </Col>
                                <Col span={6} style={{textAlign: 'center'}}>
                                    <Button type="primary" icon="search" style={{marginLeft: 0}} onClick={this.handleSearch.bind(this)}>查询</Button>
                                </Col>
                            </Row>
                        </div>
                    </Form>

                    <Table rowKey="id" dataSource={this.props.blacklist.list} columns={this.columns} bordered={true}
                           size={'middle'}  pagination={pagination}/>
                </div>
            )
        }
    })


)
